import React, { useState, useEffect, useRef } from 'react';
import { Modal, Button } from "@/component/common";
import Cropper from 'react-cropper';
import "cropperjs/dist/cropper.css";
import { Upload, message } from 'antd';
import './index.scss';
import { dataURLtoFile } from '@/util/usefulJS'

function MyCropper(props){

    const myCropper = useRef(null)
    const [imgUrl, setImgUrl] = useState('')
    const [fileObj, setFileObj] = useState(null);

    // useEffect(() => {
    //     if(!props.imgUrl) return
    //     setImgUrl(props.imgUrl);
    //     // console.log(`myCropper`, myCropper)
    // }, [props.imgUrl]);

    const uploadOption = {
        name: 'file',
        showUploadList: false,
        accept:"image/jpg,image/jpeg,image/png",
        onChange(obj){
            // console.log(`file`, obj)
        },
        beforeUpload(file){
            if(file.size > 10000000 ){
                message.warn('图片大小不能大于10M')
                setImgUrl('')
                setFileObj(null)
                return false
            }
            if(file.type != 'image/jpg'&&file.type != 'image/jpeg'&&file.type != 'image/png' ){
                message.warn('请上传JPG/JPGE/PNG类型的图片')
                setImgUrl('')
                setFileObj(null)
                return false
            }
            const reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = () => {
                setImgUrl(reader.result)
                setFileObj(file)
              };
            return false
        },
    }

    const getCropperImg = ()=>{
        if(!imgUrl) {
            message.warn('请选择图片进行裁剪！')
            return
        }
        let c = myCropper.current.cropper.getCroppedCanvas()
        let base64 = c.toDataURL()
        // console.log(`base64`, base64)
        console.log(fileObj)
        let file = dataURLtoFile(base64,fileObj.name)
        // console.log(`file`, file)

        props.getFile(file,fileObj,base64)
        initPage()
        handleClose()
    }

    const handleClose = ()=>{
        props.onClose()
    }

    const cancel = ()=>{
        initPage()
        handleClose()
    }

    const initPage = ()=>{
        setImgUrl('')
        setFileObj(null)
    }

    return (
        <Modal 
        visible={props.visible}
        footer={null}
        onClose={props.onClose}
        title={props.title || "选择图片"}
        onCancel={handleClose}
        className="cropper"
        bodyStyle={{
            padding: 0,
        }}>
            <div className="uploadContent">
                <Upload {...uploadOption}>
                    <button className="upload_btn" >选择本地图片</button>
                </Upload>
                <span className="upload_tips">上传要求大小≤10MB，限JPG/JPEG/PNG格式。</span>
                {/* <input type="file" onChange={(e)=>{uploadImg(e)}} /> */}
                <div className='clear' style={{marginTop: 20}}>
                    {
                        imgUrl?
                        <Cropper
                            style={{width:400,height:300,float:'left',marginRight: 15}}
                            ref={myCropper}
                            src={imgUrl}
                            aspectRatio={90/90}
                            preview="#preview"
                        />: 
                        <div className="noData">
                            <div className="noDataImg"></div>
                            请选择本地图片!
                        </div>
                    }
                    {
                        imgUrl?
                        <div className='left' style={{textAlign: "center",color: "#666666"}}>
                            <div id="preview" style={{width: 90,height: 90, overflow: 'hidden', marginBottom: 15}}>
                            </div>
                            封面预览
                        </div>
                        :null
                    }
                </div>
            </div>
            <div className="modal_footer">
                <div className="confirm_btn" onClick={getCropperImg}>确定</div>
                <div className="cancel_btn" onClick={cancel}>取消</div>
            </div>
        </Modal>
    )
}

export default MyCropper
